<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>user</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <style>
        #main{
            padding: 100px 100px;
            text-align: center;
        }
        #table td {
            width: 120px;
        }

        select {
            width: 80px;
            height: 25px;
        }

        #select{
            margin-top: 20px;
            text-align: center;
        }
        #select {
            width:1000px;
            height:50px;
            margin:0 auto;
        }
        #select div{
            float: left;
            margin-left: 5px;
        }
        #select button{
            margin-left: 30px;
        }
    </style>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript">
        $().ready(function() {
            $("#insertBtn").click(function() {
                location.href = "/toInsertNew";
            })

            $(".updateBtn").click(function() {
                var id = this.value
                location.href = "/toUpdate?id="+id;
            })

            $(".deleteBtn").click(function() {
                var id = this.value
                location.href = "/delete?id="+id;
            })
        })
    </script>

</head>
<body>

<div id="main">
    <!-- 顶部form表单，查询 -->
    <div class="top" id="select">

        <form action="/toIndex" method="post">

            <div class="form-group">
                <!-- 姓名 -->
                <div>
                    <input class="col-sm-10 form-control" type="text" name="name" th:value="${user.name==null?'':user.name}" placeholder="请输入姓名">
                </div>
                <!-- 性别 -->
                <div>
                    <select class="col-sm-10 form-control" name="sex" th:value="${user.sex==null?'':user.sex}">
                        <option th:selected="${user.sex==''||user.sex==null}" value ="">请选择</option>
                        <option th:selected="${user.sex==1}" value ="1">男</option>
                        <option th:selected="${user.sex==2}" value ="2">女</option>
                    </select>
                </div>
                <!-- 年龄 -->
                <div>
                    <input class="col-sm-10 form-control" type="text" name="age" th:value="${user.age==null?'':user.age}" placeholder="请输入年龄"></div>
                <!-- 成绩 -->
                <div>
<!--                    <input class="col-sm-10 form-control" type="text" name="grade" th:value="${user.grade==null?'':user.grade}" placeholder="请输入成绩">-->


                    <select class="col-sm-10 form-control" name="grade" th:value="${user.grade==null?'':user.grade}">
                        <option th:selected="${user.grade==''||user.grade==null}" value="">请选择</option>
                        <option th:selected="${user.grade==1}" value ="1">不及格</option>
                        <option th:selected="${user.grade==2}" value ="2">及格</option>
                        <option th:selected="${user.grade==3}" value ="3">一般</option>
                        <option th:selected="${user.grade==4}" value ="4">良好</option>
                        <option th:selected="${user.grade==5}" value ="5">优秀</option>
                       </select>
                </div>

                <!-- 查询按钮 -->
                <div>
                    <button class="btn btn-primary" type="submit">查询</button>
                    <button class="btn btn-warning" id="insertBtn" type="button">新增</button>
                </div>
            </div>

        </form>

    </div>

    <!-- 中间list栏，显示user数据 -->
    <div class="list" id="page">

        <table id="table"
               class="table table-hover table-bordered table-striped">
            <thead>
            <tr>
                <td>姓名</td>
                <td>头像</td>
                <td>性别</td>
                <td>年龄</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="u : ${userList}" class="user">
                <input type="hidden" name="id" th:value="${u.id}"/>
                <td class="nameTd">
                    <p class="name" th:text="${u.name}">name</p>
                </td>
                <td>
                    <img class="photo" style="width: 45px;height: 45px;float: left;" th:alt="${u.name}" th:src="'/image/'+${u.img}">
                </td>
                <td class="sexTd">
                    <p class="sex" th:text="${u.sex==1?'男':'女'}">sex</p>
                    </select>
                </td>
                <td class="ageTd">
                    <p class="age" th:text="${u.age}">age</p>
                </td>
                <td class="gradeTd">
                    <p class="grade" th:text="${u.grade}">grade</p>
                </td>
                <td>
                    <div>
                        <button class="updateBtn btn btn-success" th:value="${u.id}">修改</button>
                        <button class="deleteBtn btn btn-info" th:value="${u.id}">删除</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
</div>
</body>
</html>